import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './GroupTab.less';
import { Table, Icon,Pagination,Popconfirm} from 'antd';

function goToImage(gid) {
   window.localStorage.setItem("gid", gid);
   window.localStorage.setItem("userListByGroupID", gid);
   window.location.hash = '#/PersonsInfo';
}

function convertTxt(e){
// {"ival1":["195096__性别__162469__男","200494__星座__161368__星座-处女座","200494__星座__161367__星座-狮子座"],"ival2":[],"ival3":[],"ival4":[],"ival5":[],"ival6":["门店购买偏好__164815__0.2-0.3__0.2-0.3","门店购买偏好__164815__0.6-0.7__0.6-0.7"]}
   if(!e)return "";
   let jsn = JSON.parse(e), temp=[];
   for(let i in jsn){
      for(let y=0,len=jsn[i].length;y<len;y++){
          temp.push('（'+jsn[i][y].replace(/(\d{6,6}__)/img, '').replace("__","：")+'）');
      }
   }
    return temp.join('&');
}

const GroupTab = ({data,gpagination,onEditItem,onPageChange,onDeleteItem,dispatch}) => {
    let columns = [{
      title: '创建日期',
      className: 'column-css',
      dataIndex: 'createtime',
    }, {
      title: '群组名称',
      className: 'column-css',
      dataIndex: 'usergroupname',
    }, {
      title: '筛选条件',
      className: 'column-css',
      dataIndex: 'customcondition',
      render: (text)=>(<span className={"column-css-content"}>{convertTxt(text)}</span>),
    }, {
      title: '用户类型',
      className: 'column-css',
      dataIndex: 'contactinfromation',
    }, {
      title: '人数',
      className: 'column-css',
      dataIndex: 'usercount',
    }, {
      title: '操作',
      className: 'column-css',
      dataIndex: 'opration',
      render: (text,record) => (
          <span>
            <a href="javascript:;" className={styles.tab_a} onClick={() => onEditItem(record.id)}>编辑</a>
            <Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.id)}>
              <a href="javascript:;" className={styles.tab_a}>删除</a>
            </Popconfirm>
            <a href={"http://115.28.164.153:9081/usergroup/downloadexcelout?id="+record.id} target="_blank" className={styles.tab_a}>下载</a>
            <a href="javascript:;" className={styles.tab_a} onClick={() => goToImage(record.id)}>查看</a>
          </span>
        ),
      // render: text => <a href="#">{text}</a>,
    }];

    // dispatch({
    //       type: 'homePage/userGroupQuery',
    //       payload: '',
    //     });

    return (
      <div>
        <Table
          className="utable gfix"
          rowKey={record => record.id}
          columns={columns}
          dataSource={data}
          pagination={false}
          footer={() => ' 共'+gpagination.total+'组'}
          bordered 
        />
        <Pagination
        className="ant-table-pagination utable gfix gofix"
        total={gpagination.total}
        current={gpagination.current}
        pageSize={gpagination.pageSize}
        onChange={onPageChange}
      />
       
      </div>
    );
}

GroupTab.propTypes = {
    // width: PropTypes.number,//.isRequired,
    // height: PropTypes.number.isRequired,
    // data: PropTypes.array
};


// export default connect(mapStateToProps)(LifeCycle);
export default GroupTab;